<template>
  <div>
    <button @click="list = shuffleArray(list)">随机排序</button>

    <transition-group tag="div" class="warps" move-class="move">
      <div class="items" v-for="item in list" :key="item.id">
        {{ item.number }}
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

let list = ref(
  new Array(81).fill(null).map((_, index) => {
    return {
      id: index,
      number: (index % 9) + 1,
    };
  })
);

// 随机打乱数组元素位置
function shuffleArray(array: any): any {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}
</script>

<style scoped>
.warps {
  display: flex;
  flex-wrap: wrap;
  width: calc((25px * 9) + (9 * 2px));
  /* border: 1px solid red; */

  .items {
    width: 25px;
    height: 25px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.move {
  transition: all 1s ease;
}
</style>
